<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js路由</title>
</head>
<body>
<div>
    <ul>
      <!-- 改变地址为锚链接格式 -->
      <li><a href="#/aaa">aaa</a></li>
      <li><a href="#/bbb">bbb</a></li>
      <li><a href="#/ccc">ccc</a></li>
    </ul>
  <div id="container"></div>
</div>
<script>
  // 监听地址
  window.onhashchange = function (){
      console.log(location.hash)
      let hash = location.hash.replace("#/","");
      console.log(hash)
    // 根据地址展示不同的内容
    switch (hash) {
      case 'aaa':
        document.getElementById("container").innerText = "AAA"
        break;
      case 'bbb':
        document.getElementById("container").innerText = "BBB"
        break;
      case 'ccc':
        document.getElementById("container").innerText = "CCC"
        break;
    }
  }
</script>

</body>
</html>